<template>
  <div class="boxs">
    <el-card shadow="always" :body-style="{ padding: '20px' }">
      <div slot="header">
        <!-- 自己封装的工具栏组件 -->
        <PageTools>
          <template #left>
            <span>总记录数：{{ total }}条 - 混入变量：{{ yj }}</span>
          </template>
          <template #right>
            <el-button
              v-if="checkPoints('p-em-import')"
              type="warning"
              :loading="downloadLoading"
              @click="$router.push('/employees')"
            >导入excle</el-button>
            <el-button type="danger" @click="exportData">导出excle</el-button>
            <el-button
              v-if="checkPoints('p-em-add')"
              type="primary"
              @click="show = true"
            >
              新增员工
            </el-button>
          </template>
        </PageTools>
      </div>
      <!-- card body -->
      <!-- table列表 -->
      <el-table border :data="list" :default-sort="{prop: 'workNumber', order: 'descending'}">
        <el-table-column type="index" label="序号" />
        <el-table-column prop="username" label="姓名" />
        <!-- 展示员工的头像 -->
        <el-table-column label="头像" prop="staffPhoto">
          <template #default="{ row }">
            <el-image
              :src="row.staffPhoto"
              fit="fill"
              class="myPhoto"
              @click="openDraw(row.staffPhoto)"
            />
          </template>
        </el-table-column>
        <el-table-column sortable prop="workNumber" label="工号" />
        <el-table-column prop="formOfEmployment" label="聘用形式">
          <template #default="{row}">
            {{ formatEmploy(row.formOfEmployment) }}
          </template>
        </el-table-column>

        <el-table-column prop="departmentName" label="部门" />
        <el-table-column prop="timeOfEntry" label="入职时间" sortable>
          <template #default="{row}">
            {{ formatTime(row.timeOfEntry) }}
          </template>
        </el-table-column>
        <el-table-column label="账户状态">
          <el-switch v-model="qy" />
        </el-table-column>
        <el-table-column label="操作" fixed="right" width="280">
          <template #default="{row}">
            <el-button
              type="text"
              size="small"
              @click="$router.push(`/employees/detail/${row.id}`)"
            >
              查看
            </el-button>
            <el-button type="text" size="small" @click="openAssign(row.id)">分配角色</el-button>
            <el-button type="text" size="small" @click="hDelEmployee(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页组件 -->
      <el-row type="flex" justify="center" align="middle" style="height: 60px">
        <el-pagination
          :total="total"
          :current-page="params.page"
          :page-size="params.size"
          :page-sizes="[10, 2]"
          layout="prev, pager, next, sizes"
          @current-change="changePage"
          @size-change="sizeChange"
        />
      </el-row>
    </el-card>
    <!-- 新增员工弹层 -->
    <AddEmploy :show="show" @close="show = false" />

    <!-- 员工头像二维码弹层 -->
    <el-dialog
      title="头像二维码"
      width="300px"
      :visible.sync="showPhoto"
    >
      <el-row type="flex" justify="center">
        <!-- 绘制头像的二维码图片 -->
        <canvas ref="cv" />
      </el-row>

    </el-dialog>

    <!-- 给员工分配角色弹层 -->
    <AssignRole ref="roles" :show-role-dialog.sync="showRoleDialog" />
  </div>
</template>

<script>
import { getEmployeeList, delEmployeeAPI } from '@/api/employees'
// 1.导入数据字典
import Types from '@/api/constant/employees'
// 导入dayjs
import dayjs from 'dayjs'
// 导入新增员工的弹层
import AddEmploy from './components/add-employee.vue'
// 导入转换二维数组方法
import { transformTdata } from '@/utils/index'
import QrCode from 'qrcode'
// 导入给员工分配角色组件
import AssignRole from './components/assign-role.vue'
export default {
  name: 'Employees',
  components: {
    AddEmploy,
    AssignRole
  },
  data() {
    return {
      showRoleDialog: false,
      // 控制头像二维码弹层的显隐
      showPhoto: false,
      // 导出loading效果
      downloadLoading: false,
      // 控制新增员工弹层显隐
      show: false,
      // 2.存储数据字典
      Types,
      qy: true,
      list: [],
      params: {
        page: 1, // 当前页
        size: 10 // 每页条数
      },
      total: 0, // 总数
      showCodeDialog: false
    }
  },
  created() {
    this.getEmployeeList()
    // this.checkPoints('我是全局混入的方法')
  },
  methods: {
    // 打开员工分配角色弹层
    /**
     * id 员工ID
     */
    openAssign(id) {
      // 打开弹层
      this.showRoleDialog = true
      // 调用分配角色子组件方法=》数据回填
      // this.$refs.roles === 等价于 分配角色子组件 this
      this.$refs.roles.getRolesById(id)
    },
    // 打开头像二维码弹层并绘制二维码
    openDraw(photoUrl) {
      // 1.打开弹层
      // 2.绘制二维码
      // dom为一个canvas的dom对象， info为转化二维码的信息
      // QrCode.toCanvas(dom, info)
      this.showPhoto = true
      // vue修改数据后，dom渲染更新是异步  =>提升页面的性能
      // 现象：不能获取到异步更新的dom
      // 解决：this.$nextTick(callback)
      this.$nextTick(() => {
        QrCode.toCanvas(this.$refs.cv, photoUrl)
      })
    },
    // 导出员工信息  下载到本地电脑
    exportData() {
      // 1.导出下载前开启loading 避免重复点击
      this.downloadLoading = true
      // import('@/vendor/Export2Excel') 异步懒加载模块
      // 因为：execl导出代码量比较打而且功能使用频率不高，所以使用懒加载，
      // 点击使用的时候才去加载模块
      import('@/utils/Export2Excel').then((excel) => {
        // 核心：准备excel表头和数据
        // 1.准备导出数据的一个map对象：包含要导出员工信息的表头(中文属性名) 和员工信息的(英文属性名)
        const maps = {
          手机号: 'mobile',
          姓名: 'username',
          入职日期: 'timeOfEntry',
          聘用形式: 'formOfEmployment',
          工号: 'workNumber',
          转正日期: 'correctionTime',
          部门: 'departmentName'
        }
        // 2.根据map对象获取导出员工信息表头(中文属性名)
        const tHeader = Object.keys(maps) // ['手机号'，...]
        // 3.根据maps对象获取导出员工数据  把this.list 转换为二维数组(包含导出的员工数据)
        const data = transformTdata(this.list, Object.values(maps))

        // 假数据
        // const tHeader = ['姓名', '性别', '期望薪资']
        // // 数据部分是二维数据
        // const data = [
        //   ['老曹', '女', '10000'],
        //   ['老史', '男', '12000'],
        //   ['老李', '女', '20000']
        // ]
        //  使用excel.export_json_to_excel 方法实现导出
        excel.export_json_to_excel({
          header: tHeader, // excel文件表头
          data, // 导出excel数据
          filename: `员工信息-${Math.random()}`, // 下载保存到本地电脑excel文件名
          autoWidth: true, // 单元格自适应
          bookType: 'xlsx' // 导出文件格式
        })
        // 2.下载完要关闭loading
        this.downloadLoading = false
      })
    },
    async getEmployeeList() {
      const data = await getEmployeeList(this.params)
      console.log(data)
      const { total, rows } = data
      this.total = total
      this.list = rows
    },
    // 页码切换
    changePage(newPage) {
      this.params.page = newPage
      this.getEmployeeList()
    },
    // 每页显示条数切换
    sizeChange(size) {
      this.params.size = size
      this.getEmployeeList()
    },
    // 格式化聘用形式
    /**
     * type 1 代表正式员工  2 代表非正式员工
     */
    formatEmploy(type) {
      // console.log('数据字典：', this.Types.hireType, type)
      /**
       * 需求：怎么根据type从数据字典[
            {
              id: 1,
              value: '正式'
            },
            {
              id: 2,
              value: '非正式'
            }
          ]
          获取对应ID的value值

          算法思路：
          1. 根据数据字典生成map=》映射关系
          2. 根据map结合type获取value值
       */
      // map = {1:'正式', 2: '非正式'}
      const map = {}
      this.Types.hireType.forEach((item) => {
        // 1.数据id作为属性名  2.数据的value作为值
        map[item.id] = item.value
      })
      // console.log('映射关系：', map, type)

      return map[type]
    },
    formatTime(timeOfEntry) {
      return dayjs(timeOfEntry).format('YYYY-MM-DD')
    },
    // 删除员工
    async hDelEmployee(id) {
      this.$confirm('你确认要删除么?', '温馨提示')
        .then(async() => {
          await delEmployeeAPI(id)
          // 解决删除最后一页数据页码正确，数据显示错误问题
          const newPage = Math.ceil((this.total - 1) / this.params.size) // 总页数
          if (this.params.page > newPage) {
            // 不正确修复，重新赋值
            this.query.page = newPage
          }
          this.getEmployeeList()
          this.$message.success('删除员工成功')
          console.log('删除成功')
        })
        .catch((error) => {
          console.log(error)
        })
    }
  }
}
</script>
<style lang="scss" scoped>
// 员工头像样式
.myPhoto{
  width: 80px;
  height: 80px;
  // 设置盒子为圆形
  border-radius: 100%;
}
</style>
